<!--
 * @Author: ChaiHongJun
 * @Date: 2021-07-08 09:13:54
 * @LastEditors: ChaiHongJun
 * @LastEditTime: 2021-07-13 10:49:18
 * @version: 
 * @Description: 
-->
<template>
  <div class="home-container">
    <!-- 导航栏  -->
    <van-nav-bar class="app-nav-bar" title="首页" @click-left="$router.back()">
      <template #left>
        <van-icon name="https://www.hzwlb.org/logo2.png" class="logo" />
      </template>
      <template #right>
        <van-button type="info" icon="search" class="search-btn" round
          >搜索</van-button
        >
      </template>
    </van-nav-bar>
    <!-- 导航栏  -->

    <!-- 用户频道列表 -->
    <van-tabs v-model="active" class="channel-tabs">
      <van-tab
        v-for="channel of channels"
        :title="channel.name"
        :key="channel.id"
      ></van-tab>
    </van-tabs>
    <!-- 用户频道列表 -->

    <!-- 内容列表 -->
    <article-list
      :channel="currentChannel"
      v-if="currentChannel"
    ></article-list>
    <!-- 内容列表 -->
  </div>
</template>
<script>
import { getUserChannels } from "@/api/user";
import { Toast } from "vant";
import articleList from "@/components/articlelist/Index.vue";
export default {
  name: "Home",
  data() {
    return {
      active: 0, //默认激活频道索引
      channels: [], //全部频道
    };
  },
  watch: {},
  computed: {
    currentChannel() {
      return this.channels[this.active];
    },
  },
  mounted() {
    //加载用户频道列表
    this.getUserChannels();
  },
  methods: {
    //加载用户频道
    async getUserChannels() {
      try {
        let { status, data } = await getUserChannels();
        if (status == 507) {
          Toast.fail({ duration: 3000, message: "数据库错误" });
        } else if (status == 200) {
          //成功获取数据
          //加载全部频道内容
          this.channels.push(...data.data.channels);
        }
      } catch (err) {
        //未知的错误
        console.log("加载用户频道错误:", err);
        Toast.fail({ duration: 3000, message: err.message });
      }
    },
  },
  components: { articleList },
};
</script>
<style scoped lang="less">
.home-container {
  /deep/ .van-nav-bar__title {
    max-width: none;
  }
  .logo img {
    width: 2rem;
    height: 2rem;
  }
  .search-btn {
    width: 260px;
    height: 32px;
    background: #5babfb;
    border: none;
    .van-icon {
      font-size: 16px;
    }
    .van-button__text {
      font-size: 14px;
    }
  }
  .channel-tabs {
    /deep/ .van-tab {
      border-right: 1px solid #edeff3;
      border-bottom: 1px solid #edeff3;
    }
    /deep/ .van-tabs__line {
      bottom: 20px;
      width: 15px !important;
      height: 3px;
      background: #3296fa;
    }
  }
}
</style>
